<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>洪炜斐——学生管理系统——登录</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/hf.css">
    <link rel="stylesheet" href="./css/table.css">
    <link rel="stylesheet" href="./css/custom.css">

    <style>
        .container-form {
            height: 80%;
        }

        .img-code {
        	cursor: pointer;
            width: 3em;
            height: 1.5em;
        }
    </style>
</head>
<body>
    <%! boolean login = false; %>
    <%
        if (request.getSession().getAttribute("userID") != null) {
            login = true;
        }
    %>
    <% if (request.getSession().getAttribute("userID") != null) { %>
        <script>
            setTimeout(() => {
                alert("你已经登录了");
                window.location.href = "./index.jsp";
            }, 500);
        </script>
    <% } %>

    <jsp:include page="component/header.jsp">
    	<jsp:param value="登录" name="page"/>
    </jsp:include>
    <main>
        <div class="container-form flex-column items-center justify-center">
            <form class="form panel" method="post" action="./action/user/login">
                <div class="text-center">
                    <h3 style="margin: 0;">用户登录</h3>
                </div>
                <div>
                    <label for="input-username">
                        用户名：
                    </label>
                    <input id="input-username" type="text" name="username" placeholder="请输入用户名" required>
                </div>
                <div>
                    <label for="input-password">
                        密码：
                    </label>
                    <input id="input-password" type="password" name="password" placeholder="请输入密码" required>
                </div>
                <div class="flex-row">
                    <label for="input-code">验证码：</label>
                    <div class="flex-row gap-05em">
                        <input id="input-code" type="text" name="code" placeholder="请输入验证码" required>
                        <img id="img-code" class="img-code" src="" alt="验证码">
                    </div>
                </div>
                <div class="flex-row justify-center">
                    <input class="button primary" type="submit" value="登录">
                </div>
                <div class="text-right font-small">
                    <a href="./register.jsp">没有账号？注册一个></a>
                </div>
            </form>
        </div>
    </main>

	<script>
		function refreshCode() {
			document.querySelector("#img-code").src = "./action/user/code?time=" + new Date().getTime();
		}
		window.addEventListener("pageshow", () => {
			refreshCode();
		});
		document.querySelector("#img-code").onclick = () => {
			refreshCode();
		};
	</script>
</body>
</html>

